<template>
  <t-table
    row-key="id"
    table-layout="auto"
    :data="clientStore.getList()"
    :columns="columns"
    :pagination="clientStore.page"
    :loading="clientStore.page.loading"
    @page-change="({ current }) => clientStore.reset(current)"
    hover
  >
    <template #code="{ row }">
      <b>{{ row.code }}</b>
    </template>
    <template #classify="{ row }">
      <t-tag theme="primary" variant="light" v-if="row.classify">{{ row.classify.name }}</t-tag>
    </template>
    <template #name="{ row }">
      {{ row.name }}
    </template>
    <template #point="{ row }">
      <t-button theme="primary" variant="text" @click="() => emit('point', row)">{{ row.point }}</t-button>
    </template>
    <template #city="{ row }">
      {{ row.city }} {{ row.area }}
    </template>
    <template #right="{ row }">
      <t-dropdown :min-column-width="88" trigger="click" @click="item => emit(item.value, row)">
        <t-button theme="primary" variant="text">
          {{ $t('common.active') }}
          <template #suffix><t-icon name="chevron-down" size="14" /></template>
        </t-button>
        <template #dropdown>
          <t-dropdown-menu>
            <t-dropdown-item value="update">{{ $t('common.update') }}</t-dropdown-item>
            <t-dropdown-item value="delete">{{ $t('common.delete') }}</t-dropdown-item>
          </t-dropdown-menu>
        </template>
      </t-dropdown>
    </template>
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../index'
  import clientStore from '../store'

  const emit = defineEmits(['delete', 'update'])
  const plugin = index.plugin
  const columns = [{
    title: plugin.t('form.code'),
    colKey: 'code',
    cell: 'code',
    fixed: 'left',
  }, {
    title: plugin.t('form.classify'),
    colKey: 'classify',
    cell: 'classify'
  }, {
    title: plugin.t('form.name'),
    colKey: 'name',
    cell: 'name'
  }, {
    title: plugin.t('form.phone'),
    colKey: 'phone'
  }, {
    title: plugin.t('form.email'),
    colKey: 'email'
  }, {
    title: plugin.t('form.point'),
    colKey: 'point',
    cell: 'point',
    align: 'center'
  }, {
    title: plugin.t('form.city') + '/' + plugin.t('form.area'),
    colKey: 'city',
    cell: 'city'
  }, {
    colKey: 'right',
    cell: 'right',
    fixed: 'right',
    align: 'right',
  }]

  // 首次请求
  clientStore.reset(1)
</script>